import { bindCamera, createCamera, deleteCamera, getCameraList, updateCamera } from '@/api'
import { useConfig } from '@/composables/useConfig'
import { useCarStore } from '@/stores/car'
import { i18n } from '@/utils'
import type { CameraData } from '@/views/Config/types'
import { InfoFilled } from '@element-plus/icons-vue'
import { ElButton, ElPopconfirm, type FormRules } from 'element-plus'
import { defineStore } from 'pinia'
import { computed, type ComputedRef } from 'vue'
import { ElMessage } from './elMessage'

export const useConfigCameraStore = defineStore('config-camera', () => {
  const carStore = useCarStore()
  const {
    formVisible,
    handleVisible,
    openDialog,
    closeDialog,
    formData,
    setForm,
    openLoading,
    closeLoading,
    loading,
    tableData,
    handleCancel,
    handleEdit,
    formRef
  } = useConfig()

  const columns = computed(() => [
    {
      label: i18n.global.t('she-xiang-tou-ming-cheng'),
      prop: 'name'
    },
    // {
    //   label:  i18n.global.t('rtsp-di-zhi'),
    //   prop: 'rtsp'
    // },
    // {
    //   label:  i18n.global.t('pin-pai'),
    //   prop: 'brand'
    // },
    // {
    //   label:  i18n.global.t('guan-lian-zhuang-tai'),
    //   prop: 'rid',
    //   slot: (row: CameraData) =>
    //     carStore.currentCar && row.rid === carStore.currentCar ?  i18n.global.t('yi-guan-lian') : ''
    // },
    {
      label: i18n.global.t('cao-zuo'),
      slot: (row: CameraData) => (
        <div>
          <ElPopconfirm
            confirm-button-text={i18n.global.t('que-ding')}
            cancel-button-text={i18n.global.t('fou')}
            icon={InfoFilled}
            icon-color="#626AEF"
            title={i18n.global.t('que-ding-shan-chu-ma')}
            onConfirm={() => handleDelete(row.id)}
          >
            {{
              reference: () => (
                <ElButton link loading={loading.value}>
                  {i18n.global.t('shan-chu')}
                </ElButton>
              )
            }}
          </ElPopconfirm>

          <ElButton link onClick={() => handleEdit(row)}>
            {i18n.global.t('bian-ji')}
          </ElButton>
          <ElButton link onClick={() => handleConnect(row.id, row.rid)}>
            {carStore.currentCar && row.rid === carStore.currentCar
              ? i18n.global.t('qu-xiao-guan-lian')
              : i18n.global.t('guan-lian')}
          </ElButton>
        </div>
      )
    }
  ])

  const formRules: ComputedRef<FormRules> = computed(() => {
    return {
      name: [{ required: true, message: i18n.global.t('qing-shu-ru-ming-cheng') }],
      ip: [{ required: true, message: i18n.global.t('qing-shu-ru-ip') }],
      port: [{ required: true, message: i18n.global.t('qing-shu-ru-duan-kou') }],
      user: [{ required: true, message: i18n.global.t('qing-shu-ru-zhang-hao') }],
      password: [{ required: true, message: i18n.global.t('qing-shu-ru-mi-ma') }],
      rtsp: [{ required: true, message: i18n.global.t('la-liu-di-zhi') }]
    }
  })

  const formFields = [
    {
      prop: 'name',
      title: i18n.global.t('ming-cheng')
    },
    {
      prop: 'ip',
      title: i18n.global.t('ip')
    },
    {
      prop: 'port',
      title: i18n.global.t('duan-kou')
    },
    {
      prop: 'user',
      title: i18n.global.t('zhang-hao')
    },
    {
      prop: 'password',
      title: i18n.global.t('mi-ma')
    },
    {
      prop: 'brand',
      title: i18n.global.t('pin-pai')
    },
    {
      prop: 'rtsp',
      title: i18n.global.t('la-liu-di-zhi')
    }
  ]

  async function getList() {
    const res = await getCameraList(carStore.currentCar, 'patroling')
    const data = res.data.list || res.data
    tableData.value = data
  }

  async function handleConnect(id: number, rid: string) {
    const data = {
      id,
      rid: rid === carStore.currentCar ? '' : carStore.currentCar,
      rtype: 'patroling'
    }
    const res: any = await bindCamera(data)
    ElMessage({ type: 'success', message: res.message })
    getList()
  }

  async function handleDelete(id: number) {
    openLoading()
    try {
      const res: any = await deleteCamera(id)
      ElMessage({ type: 'success', message: res.message })
      getList()
    } finally {
      closeLoading()
      getList()
    }
  }

  async function handleSubmit() {
    await formRef.value?.validate(async (valid: boolean) => {
      if (valid) {
        openLoading()
        try {
          let res: any
          const data = { ...formData.value }
          if (data.id) {
            res = await updateCamera(data)
          } else {
            data.rtype = 'patroling'
            res = await createCamera(data)
          }
          ElMessage({ type: 'success', message: res.message })
          handleCancel()
          getList()
        } finally {
          closeLoading()
          getList()
        }
      }
    })
  }

  return {
    columns,
    formVisible,
    handleVisible,
    openDialog,
    closeDialog,
    formData,
    setForm,
    openLoading,
    closeLoading,
    loading,
    formRules,
    formFields,
    tableData,
    getList,
    handleConnect,
    handleDelete,
    handleCancel,
    handleSubmit,
    formRef
  }
})
